<template>
	<map
		style="width: 100%; height: 100%"
		:latitude="mapLocation.latitude"
		:longitude="mapLocation.longitude"
		:markers="markers"
		:controls="controls"
		:scale="scale"
		:min-scale="minScale"
		:max-scale="maxScale"
		:id="mapId"
		:subkey="subKey"
		:layerStyle="layerstyle"
		@markertap="handleMarkertap"
		@controltap="handlerTapControl"
		@regionchange="mapChange"
		v-if="show"
	></map>
</template>

<script>
import { TMAP_OPTION } from '../env';
import { getLocation } from '@/common/utils/map';
import { getMapKey } from '@/common/request/api'
const TmapPosition = {
	RIGHT_BOTTOM: [-20, -70]
};
export default {
	options: {
		virtualHost: true
	},
	props: {
		longitude: Number,
		latitude: Number,
		userLongitude: Number,
		userLatitude: Number,
		mapId: String,
		minScale: {
			type: Number,
			default: 3
		},
		maxScale: {
			type: Number,
			default: 20
		},
		scale: {
			type: Number,
			default: 3
		},
		autoLocation: Boolean,
		layerStyle: Boolean
	},
	data() {
		return {
			controls: [],
			markers: [],
			mapLocation: {
				longitude: 0,
				latitude: 0
			},
			show: false,
			subKey: '',
			layerstyle: ''
		};
	},
	computed: {
		userLocation() {
			return {
				longitude: this.userLongitude || this.longitude,
				latitude: this.userLatitude || this.latitude
			};
		}
	},
	async mounted() {
		if (this.layerStyle) {
			try {
				const res = await getMapKey();
				this.subKey = res.data?.subKey;
				this.layerstyle = res.data?.layerStyle;
			} catch (e) {
				//TODO handle the exception
			}
		}
		this.show = true;
		if (this.autoLocation) {
			try {
				await this.getLocation();
			} catch (e) {
				//TODO handle the exception
			}
		}
		this.mapLocation.latitude = this.latitude;
		this.mapLocation.longitude = this.longitude;
		if (TMAP_OPTION.locationControl.show) {
			let { width, height, position, icon } = TMAP_OPTION.locationControl;
			uni.getSystemInfo({
				success: (res) => {
					let [left, top] = TmapPosition[position];
					this.controls.push({
						id: 1,
						position: {
							left: left > 0 ? left : res.windowWidth - width + left,
							top: top > 0 ? top : res.windowHeight - height + top,
							width,
							height
						},
						iconPath: icon,
						clickable: true
					});
				}
			});
		}
		this.initMarkers();
	},
	methods: {
		getLocation() {
			return new Promise((resolce, reject) => {
				getLocation(this.$t('nearby.openGPS'), this.$t('nearby.GPSErr'))
					.then((res) => {
						this.$emit('updateLocation', res, () => {
							resolce();
						});
					})
					.catch(() => {
						reject();
					});
			});
		},
		handlerTapControl(e) {
			if (e.detail.controlId === 1) {
				this.mapLocation.latitude = this.userLocation.latitude;
				this.mapLocation.longitude = this.userLocation.longitude;
			}
		},
		mapChange() {
			uni.createMapContext(this.mapId, this).getCenterLocation({
				success: (res) => {
					this.mapLocation.latitude = res.latitude;
					this.mapLocation.longitude = res.longitude;
					this.$emit('mapLocationChange', this.mapLocation, (hasInitMarker) => {
						hasInitMarker && this.initMarkers();
					});
				}
			});
		},
		initMarkers() {
			this.$emit('getMarkerArray', (markerArray, defaultMarker = true) => {
				if (defaultMarker) {
					this.markers = markerArray.map((item) => {
						let { latitude, longitude, id, icon } = item;
						let { src, width, height, anchor } = TMAP_OPTION.markerStyle[icon];
						return {
							id,
							latitude,
							longitude,
							iconPath: src,
							width,
							height,
							anchor: {
								x: anchor[0],
								y: anchor[1]
							}
						};
					});
				} else {
					this.markers = markerArray;
				}
			});
		},
		handleMarkertap(e) {
			this.$emit('markerClick', e);
		}
	}
};
</script>

<style></style>
